<template>
  <div>
    <el-form class="row" style="margin-top: 20px" :model="queryParams" ref="queryForm" size="small" :inline="true"
             label-width="68px">
      <el-form-item label="项目" prop="projectId">
        <el-select v-model="selectValue"
                   placeholder="请选择项目"
                   @change="selectChange()"
                   clearable>
          <el-option v-for="item in projectList" :key="item.projectId" :label="item.projectName"
                     :value="item.projectId">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div ref="main" style="width: 100%; height: 800px;"></div>
  </div>
</template>

<script>
//引入echarts
import * as echarts from 'echarts';
import {listProjectByUserId} from "@/api/project/project";
import {getPaymentStatisticsByProjectId} from "@/api/prodata/paymentStatistics"

export default {
  name: "paymentStatistics",
  data() {
    return {
      //图表容器对象
      myChart: null,
      //图表各项属性
      option: null,
      // 项目id
      selectValue:null,
      // 项目列表
      projectList: [],
      // 查询参数
      queryParams: {
      }
    }
  },
  created() {
    this.getListProject();
    this.getList();
  },
  methods: {
    /** 用户能看见的项目列表 */
    getListProject() {
      listProjectByUserId().then(response => {
        this.projectList = response.data;
      });
    },
    selectChange() {
      this.getList();
    },
    /** 查询列表 */
    getList() {
      // 向查询列表页添加项目id
      if (this.selectValue){
        this.queryParams.projectId = this.selectValue
      } else {
        this.queryParams.projectId = -1
      }

      getPaymentStatisticsByProjectId(this.queryParams.projectId).then(response => {
        console.log(response);
        this.option.series[0].data = response.data.percentList;
        this.option.xAxis.data = response.data.nameList;

        //配置项
        this.myChart.setOption(this.option);
      });

    },
  },

  mounted() {
    //1, 初始化图表容器
    this.myChart = echarts.init(this.$refs.main);

    //2, 图表各项属性
    this.option = {
      // 提示信息
      tooltip: {

      },
      // 工具箱
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      // x轴
      xAxis: {
        name: '承包商',
        type: 'category',
        axisLabel: {

        }
      },
      // y轴
      yAxis: {
        name: '百分比',
        type: 'value',
        max: 100,//最大值
        min: 0,//最小值
        interval:50,//间隔
        axisLabel:{
          formatter: function (val) {//百分比显示
            return val + '%';
          }
        },

      },
      // 图表系列
      series: [{
        type: 'bar',
        label:{
          show: true,
          position: 'top',

        }
      }]
    };

    //配置项
    this.myChart.setOption(this.option);
  }
}
</script>

<style scoped>

</style>
